
<template>
  <div>
	
	<myheader></myheader>
    
	<br /><br />

	<Breadcrumb :datas="datas"></Breadcrumb>
    
    
		<section class="featured-block text-center">

			<div class="container">

                <form>

                    商品名称：<input type="text" name="name" v-model="name">

					<br>

					商品描述：<input type="text" name="desc" v-model="desc">

					<br>

					商品图片：<input type="file" id="img" accept="image/jpeg,image/jpg,image/png">

					<br>

					商品视频：<input type="file" id="video" accept="audio/mp4, video/mp4">

					<br>

					商品规格：<input type="text" name="param" v-model="param">

					<br>

					商品分类：<select name="" id="" v-model="cid">

							    <option  v-for="(cate,index) in cates" :key="index" :value="cate.id">{{cate.cname}}</option>

							 </select>

					<br>

					商品价格：<input type="text" name="price" v-model="price">
					<br>
                    
                    <br>

					<Button color='yellow' @click="addgoods">添加商品</Button>

                </form>

			</div>

		</section>

		<myfooter></myfooter>
    
  </div>
  
</template>


 
<script>

// 组件包含
import myheader from './myheader.vue';
import myfooter from './myfooter.vue';

export default {
    data () {
        return {
            // 面包屑导航
            datas:[{title:'商品展示页面',route:{name:'goodslist'}},{title:'商品添加页面'}],
            name: '',
            desc: '',
            param: '',
            price: '',
            cates: '',
            cid: '',
        }
    },
	// 定义组件
	components:{

		'myheader':myheader,
        'myfooter':myfooter
        
	},
    mounted:function(){

	  	this.axios('http://localhost:8000/addgoods/').then(res=>{

                console.log(res) 
                this.cate = res.data.cates
                
        })
  
    },
    methods:{

        //   添加商品
        addgoods(){
            
            let form_data = new FormData();
            //   声明文件对象
            var img = document.getElementById("img").files[0];
            var video = document.getElementById("video").files[0];
            var sel = document.getElementById("select");
            //   添加文件
            form_data.append("img", img);
            form_data.append("video", video);
            form_data.append("name", this.name);
            form_data.append("price", this.price);
            form_data.append("desc", this.desc);
            form_data.append("param", this.param);
            form_data.append("cid", sel.value);

            //   请求后台接口
            this.axios({

                url: "http://localhost:8000/addgoods/",
                method: "POST",
                data: form_data,
                headers: {
                "Content-Type": "multipart/form-data"
                }

            }).then(res => {
                console.log(res);
                this.$Message(res.data.message);
            });

        }

        

    }

}


</script>
 
<style>



</style>
